<template>
  <div>
    <!-- 头部区域 -->
    <MainInHeadVue>
      <template #left>
        <el-form :inline="true" :model="partners" class="demo-form-inline">
          <el-form-item label="合作商搜索：">
            <el-input v-model.trim="partners.partnersSearch" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchFn">查询</el-button>
            <el-button type="primary" @click="getPointDetail">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
    </MainInHeadVue>
    <!-- 内容区域 -->
    <MainInConterVue>
      <template #conter>
        <!-- 新建按钮 -->
        <el-button @click="addInfo"> <i class="el-icon-plus" /> 新建 </el-button>
        <!-- 表单控件 -->
        <el-table :data="partnersInfo" style="width: 100%">
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="name" label="合作商名称" />
          <el-table-column prop="account" label="账号" />
          <el-table-column prop="vmCount" label="设备数量" />
          <el-table-column prop="ratio" label="分成比例" />
          <el-table-column prop="contact" label="联系人" />
          <el-table-column prop="mobile" label="联系电话" />
          <el-table-column label="操作" width="300">
            <template #default="scoped">
              <el-link :underline="false" type="primary" @click="resetPartnersPwdFn(scoped.row.id)">重置密码</el-link>
              <el-link :underline="false" type="primary" @click="seePArtners(scoped.row.id)">查看详情</el-link>
              <el-link :underline="false" type="primary" @click="putPartnersInfo(scoped.row.id)">修改</el-link>
              <el-link :underline="false" type="danger" @click="delPartnersUser(scoped.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="+pageInfo.totalCount"
          @current-change="setcurrentPage"
        />
      </template>
    </MainInConterVue>
    <!-- 新建弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="addDialogVisible"
      width="45%"
    >
      <el-form ref="formLabelAlign" :data="formLabelAlign" :rules="rules" label-width="80px" :model="formLabelAlign">
        <el-form-item label="合作商名称：" label-width="150px" prop="name">
          <el-input v-model="formLabelAlign.name" maxlength="10" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系人：" label-width="150px" prop="contact">
          <el-input v-model="formLabelAlign.contact" maxlength="10" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话：" label-width="150px" prop="mobile">
          <el-input v-model="formLabelAlign.mobile" maxlength="11" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分成比例（ % ）：" label-width="150px" prop="proportion">
          <template>
            <el-input-number v-model="formLabelAlign.proportion" controls-position="right" placeholder="请输入" style="width: 100%;" @change="handleChange" />
          </template>
        </el-form-item>
        <el-form-item label="账号：" label-width="150px" prop="account">
          <el-input v-model="formLabelAlign.account" maxlength="18" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="密码：" label-width="150px" prop="password">
          <el-input v-model="formLabelAlign.password" maxlength="20" show-word-limit placeholder="请输入" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmt">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 重置合作商密码 -->
    <el-dialog
      title="重置密码"
      :visible.sync="resetPartnersUserPwd"
      width="30%"
    >
      <div>确定重置合作商密码嘛？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetPartnersUserPwd = false">取 消</el-button>
        <el-button type="primary" @click="resetFn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 合作商详情 -->
    <el-dialog
      title="合作商详情"
      :visible.sync="seeUserPArtners"
      width="40%"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            合作商信息: {{ seePArtnersInfo.name }}
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            联系人： {{ seePArtnersInfo.contact }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            联系电话： {{ seePArtnersInfo.mobile }}
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            分成比例： {{ seePArtnersInfo.vmCount }}%
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 修改合作商信息 -->
    <el-dialog
      title="修改合作商信息"
      :visible.sync="putPArtnerInfo"
      width="45%"
    >
      <el-form ref="putPartnerInfoRef" :data="putPartnerInfo" label-width="80px" :model="formLabelAlign">
        <el-form-item label="合作商名称：" label-width="150px" prop="name">
          <el-input v-model="putPartnerInfo.name" maxlength="10" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系人：" label-width="150px" prop="contact">
          <el-input v-model="putPartnerInfo.contact" maxlength="10" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话：" label-width="150px" prop="mobile">
          <el-input v-model="putPartnerInfo.mobile" maxlength="11" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分成比例（ % ）：" label-width="150px" prop="proportion">
          <template>
            <el-input-number v-model="putPartnerInfo.ratio" controls-position="right" placeholder="请输入" style="width: 100%;" @change="handleChange" />
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="putPArtnerInfo = false">取 消</el-button>
        <el-button type="primary" @click="putSubmt">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MainInHeadVue from '@/components/SvgIcon/MainConter/MainInHead.vue'
import MainInConterVue from '@/components/SvgIcon/MainConter/MainInConter.vue'
// 获取合作商列表,新增合作商信息
import { getPartnersList, addPartnersUser, resetPartnersPwd, putPartnersInfo, delPartnersInfo } from '@/api'
export default {
  components: {
    MainInConterVue,
    MainInHeadVue
  },
  data() {
    return {
      // 修改合作商弹出框
      putPArtnerInfo: false,
      // 储存修改的合作商信息
      putPartnerInfo: {
        name: '', // 合作商名称
        contact: '', // 联系人
        mobile: '', // 联系电话
        ratio: '', // 分成比例
        account: '' // 账号
      },
      // 储存查看合作商详情弹出框变量
      seeUserPArtners: false,
      // 储存查看信息筛选后的值
      seePArtnersInfo: [],
      // 储存重置变量
      PartnerId: '',
      // 重置合作商密码弹窗
      resetPartnersUserPwd: false,
      // 新增表单信息
      formLabelAlign: {
        name: '', // 合作商名称
        contact: '', // 联系人
        mobile: '', // 联系电话
        proportion: '', // 分成比例
        account: '', // 账号
        password: ''// 密码
      },
      // 表单必填校验
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        proportion: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      },
      // 新建弹出框
      addDialogVisible: false,
      // 合作商列表
      partnersInfo: null,
      // 合作商搜索信息
      partners: {
        partnersSearch: ''
      },
      // 默认页页码值信息
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      // 储存页码值信息
      pageInfo: {}
    }
  },
  created() {
    this.partnersList()
  },
  methods: {
    // 删除合作商信息
    async delPartnersUser(id) {
      await delPartnersInfo(id)
      this.partnersList()
    },
    // 修改合作商信息
    async putSubmt() {
      await putPartnersInfo(this.PartnerId, this.putPartnerInfo)
      this.$refs.putPartnerInfoRef.resetFields()
      this.$message.success('修改成功')
      this.putPArtnerInfo = false
    },
    // 修改合作商信息弹框
    putPartnersInfo(id) {
      const i = (this.partnersInfo.filter(item => item.id === id))[0]
      this.putPartnerInfo.account = i.name
      this.putPartnerInfo.mobile = i.mobile
      this.putPartnerInfo.ratio = i.ratio
      this.putPartnerInfo.name = i.name
      this.putPartnerInfo.contact = i.contact
      this.putPArtnerInfo = true
      this.PartnerId = id
    },
    // 查看合作商信息
    seePArtners(id) {
      this.seePArtnersInfo = (this.partnersInfo.filter(item => item.id === id))[0]
      console.log(this.seePArtnersInfo)
      this.seeUserPArtners = true
    },
    // 重置密码
    async resetFn() {
      await resetPartnersPwd(this.PartnerId)
      this.$message.success('重置成功')
    },
    // 弹出重置框
    resetPartnersPwdFn(id) {
      this.resetPartnersUserPwd = true
      this.PartnerId = id
    },
    // 当页码值发生改变
    setcurrentPage(val) {
      this.params.pageIndex = val
      this.partnersList()
    },
    // 修改百分比
    handleChange(val) {
      console.log(val)
    },
    // 获取合作商列表
    async partnersList() {
      const res = await getPartnersList(this.params)
      this.partnersInfo = res.currentPageRecords
      this.pageInfo = res
      console.log(this.partnersInfo)
    },
    // 提交新建信息
    async addSubmt() {
      console.log(this.formLabelAlign)
      await addPartnersUser({
        name: this.formLabelAlign.name,
        account: this.formLabelAlign.account,
        password: this.formLabelAlign.password,
        ratio: this.formLabelAlign.proportion,
        contact: this.formLabelAlign.contact,
        mobile: this.formLabelAlign.mobile
      })
      this.$message.success('添加合作商成功')
      this.$refs.formLabelAlign.resetFields()
      this.partnersList()
      this.addDialogVisible = false
    },
    // 添加信息
    addInfo() {
      this.addDialogVisible = true
    },
    // 搜索信息
    searchFn() {
      this.partnersInfo = this.partnersInfo.filter(item => item.name === this.partners.partnersSearch)
    },
    // 重置信息
    getPointDetail() {
      this.partnersList()
    }

  }

}
</script>

<style scoped lang="scss">
.el-form{
  margin-top: -6px;
}
.el-button {
  background-color: #8e76a2;
  border: 1px solid #fff;
  color: #fff;
}
.el-link{
  margin-left: 20px;
  color: #8e76a2;
}
.el-pagination{
  margin-top: 20px;
}
.el-table{
  margin-top: 20px;
}
::v-deep .active{
  background-color: #8e76a2 !important;
  color: #fff;
}
::v-deep .el-dialog__header{
  background-color: #fff;
}
::v-deep .el-dialog__title{
  color: #000;
}
::v-deep .el-dialog{
  border-radius: 10px ;
  overflow: hidden ;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #8e76a2;
    color: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    padding-left: 5px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  ::v-deep .el-dialog__header .el-icon-close:before{
    color: #000;
  }
</style>

